<template>
	<view >
		
		<u-navbar  :border-bottom="false" placeholder="" autoBack>
		  <view slot="center"  style="width: 300rpx;">
			  <u-search v-model="keyword" placeholder="搜索您要的商品" :disabled="false" 
				:showAction="false" margin="0 0 0 -146rpx" @search="search"></u-search>
		  </view>
		</u-navbar>
		
		
		<!-- 历史搜索 -->
		<template v-if="historyList.length">
			<view class="flex align-center p-2 mt-2">
				<view class="font-weight-bold font-28">历史搜索</view>
				<view class="ml-auto">
					<u-icon name="trash" @click="deleclick"></u-icon>
				</view>
			</view>
			<view class="mt-2 px-2">
				<colorTag color v-for="(item,index) in historyList" :key="index"
				:item="item" :color="false" @click="quickSearch(item)"></colorTag>
			</view>
		</template>
		
		
		
		
		
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				keyword:'',
				historyList:[],
				
			}
		},
		
		onShow() {
			this.getHistory()
		},
		methods: {
			getHistory(){
				this.$api.searchLog().then(res=>{
					if(res.code === 1){
						this.historyList = res.data
					}
				})
			},
			deleclick(){
				uni.showModal({
					title: '提示',
					content: '确定删除历史记录吗?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
							this.$api.searchDel().then(res=>{
								if(res.code === 1){
									this.getHistory()
								}
							})
						}
					},
					
				});
				
			},
			quickSearch(name){
				this.keyword = name
				if (this.keyword === '') {
					return uni.showToast({
						title: '关键词不能为空',
						icon: 'none'
					});
				}
				
				uni.$u.route('pages/index/searchList',{
					keyword:e
				})
				
			},
			search(e){
				
				if (this.keyword === '') {
					return uni.showToast({
						title: '关键词不能为空',
						icon: 'none'
					});
				}
				uni.$u.route('pages/index/searchList',{
					keyword:e
				})
				
			},
			
			// 清除搜索记录
			clearHistory(){
				uni.showModal({
					title: '提示',
					content: '是否要清除搜索历史？',
					cancelText: '取消',
					confirmText: '清除',
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync('searchHistory')
							this.historyList = []
						}
					},
				});
			}
		}
	}
</script>

<style>
page{
	background: #fff;
}
.search {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: #EB463E;
		color: white;
		border-radius: 10rpx;
		width: 110rpx;
		height: 48rpx;
		font-size: 25rpx;
	}
</style>
